<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}-<c:if test="${!empty sessionScope._local_node_session}">${sessionScope._local_node_session.nodeName}-</c:if>${si:ctname("NET_TYPE",sessionScope._netType)}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />
<script type="text/javaScript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/popover.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/tooltip.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/si.util.js"></script>
<script type="text/javascript">
	jQuery(function($) {
		$('[data-rel=tooltip]').tooltip();
		$('[data-rel=popover]').popover({
			html : true
		});
		 
		$('#NewPiediv').on('shown.bs.popover', function() {
			var searchType = $("#searchType").val();
			if(searchType=="1") { 
				 $("#type_in").attr("checked", "true");   
			 }
			 if(searchType=="2"){
				 $("#type_mang").attr("checked", "true");
				 change();
			 } 
			 if(searchType=="3"){
				 $("#type_nodebet").attr("checked", "true");
				  var beginId = $("#beginId").val();
					var endId = $("#endId").val(); 
					change();
					$("#3").val(beginId);
					$("#4").val(endId);
					$("#beginId").val($("#3").val()); 
					$("#endId").val($("#4").val()); 
			 } 
			 
		});
		
		$('#searchNewdiv').on('shown.bs.popover', function() {
			var asearchType = $("#asearchType").val();
			 
			 if(asearchType=="3"){
				 $("#atype_sys").attr("checked", "true");
				  
			 } 
			  if(asearchType=="1") {
				 $("#atype_node").attr("checked", "true");
				  
			 }
			
			
		});
		
		$('#searchdiv').on('shown.bs.popover', function() {
			var bsearchType = $("#bsearchType").val();
			 
			 if(bsearchType=="3"){
				 $("#btype_sys").attr("checked", "true");
				 
			 } 
			  if(bsearchType=="1") {
				 $("#btype_node").attr("checked", "true");
				  
			 }
			
			
		});
		
		putDateA("type1234");
		putDateA("type2345");
		putDateA("type456");
		putDateA("type567");
		
		getManageNodeNum();
		getManageNetTop();
		getPieGetData();
		send11();
	
	});

	function formSubmit() {
		$("#searchForm").submit();
	}
	
	function putDateA(aa) {
		var timetype = $("input[name='time_"+aa+"']:checked").val();
		var now;
		if (timetype == "month") {
			now = $.now().substring(0, 7);
		} else {
			now = $.now().substring(0, 4)
		}
		$("input[name='"+aa+"']").val(now);
	}
	 

	function changeTime(obj) {
		var type = $(obj).val();
		//console.log(type);
		$(obj).parent().next().find("input").css("display", "none");
		$(obj).parent().next().find("input." + type).css("display", "");
		var now;
		if (type == "month") {
			now = $.now().substring(0, 7);
		}
		if (type == "year") {
			now = $.now().substring(0, 4);
		}
		$(obj).parent().next().find("input." + type).val(now);

	}

	function send11() {
		$.ajax({
			type : "POST",
			dataType : "json",
			url : _ctx + "/stat/st_bt_reg_y.do",
			data : {
				"nt" : $("#type567").val()
			},
			success : function(content) {
				if (content.status == '1') {

					var chart = new FusionCharts(
							"${ctx}/static/FusionCharts/Charts/MSLine.swf",
							"ChartLineOneOneId", $("#line14").width() - 30,
							"400", "0", "0");
					chart.setDataXML(content.data);
					chart.render("line14");
				} else {
					ui.msg(content.msg, 0);
				}
			},
			error : function() {
				//ui.msg('信息加载错误', 0);
			}
		});
	}

	function closediv() {
		$("#searchNewdiv").popover('toggle');
	}
	function goC() {
		var type = $("input[name='atype1234']:checked").val();
		$("#searchNewdiv").popover('toggle');
		$("#asearchType").val(type);
		getManageNodeNum();

	}

	function getManageNodeNum() {
		$
				.ajax({
					type : "POST",
					dataType : "json",
					url : _ctx + "/stat/st_bt_node_num.do",
					data : {
						"timeType" : $("input[name='time_type1234']:checked").val(),
						"nt" :  $("input[name='type1234']:not(:hidden)").val(),
						"stat_level" : $("input[name='atype1234']:checked").val() ? $(
								"input[name='atype1234']:checked").val()
								: "1"

					},
					success : function(content) {
						if (content.status == '1') {

							var chart = new FusionCharts(
									"${ctx}/static/FusionCharts/Charts/StackedColumn2DLine.swf",
									"ChartLineOneTwoTfId", $("#line1234")
											.width() - 30, "400", "0", "0");
							chart.setDataXML(content.data);
							chart.render("line1234");
						} else {
							ui.msg(content.msg, 0);
						}
					},
					error : function() {
						//ui.msg('信息加载错误', 0);
					}
				});
	}

	function goB() { 
		var type = $("input[name='atype456']:checked").val();
		$("#searchdiv").popover('toggle');
		$("#bsearchType").val(type);
		getManageNetTop();
	}
	function closeSearchdiv() {
		$("#searchdiv").popover('toggle');
	}

	function getManageNetTop() {
		$
				.ajax({
					type : "POST",
					dataType : "json",
					url : _ctx + "/stat/st_bt_net_top.do",
					data : {
						"timeType" : $("input[name='time_type456']:checked")
								.val(),
						"nt" :  $("input[name='type456']:not(:hidden)").val(),
						"stat_level" : $("input[name='atype456']:checked").val() ? $(
								"input[name='atype456']:checked").val()
								: "1"
					},
					success : function(content) {
						if (content.status == '1') {

							var chart = new FusionCharts(
									"${ctx}/static/FusionCharts/Charts/StackedColumn2DLine.swf",
									"ChartLinefourfsId",
									$("#line456").width() - 30, "400", "0", "0");
							chart.setDataXML(content.data);
							chart.render("line456");
						} else {
							ui.msg(content.msg, 0);
						}
					},
					error : function() {
						//ui.msg('信息加载错误', 0);
					}
				});
	}

	function getPieGetData() {
		$
				.ajax({
					type : "POST",
					dataType : "json",
					url : _ctx + "/stat/st_bt_dt_top.do",
					data : {
						"timeType" : $("input[name='time_type2345']:checked")
								.val(),
						"nt" : $("input[name='type2345']:not(:hidden)").val(),
						"stat_level" : $("input[name='type_jiedian']:checked") .val() ? $("input[name='type_jiedian']:checked") .val() : "1",
						"from_node_id" : $("#3").val(),
						"to_node_id" : $("#4").val()
					},
					success : function(content) {
						if (content.status == '1') {

							var chart = new FusionCharts(
									"${ctx}/static/FusionCharts/Charts/Pie2D.swf",
									"ChartPieOneId",
									$("#chartPieOne").width() - 30, "400", "0",
									"0");
							chart.setDataXML(content.data);
							chart.render("chartPieOne");
						} else {
							ui.msg(content.msg, 0);
						}
					},
					error : function() {
						//ui.msg('信息加载错误', 0);
					}
				});
	}
	function beginId(){
		$("#beginId").val($("#3").val());
	}
	function endId(){
		$("#endId").val($("#4").val());
	}
	function change() {
		$("#3").css("display", "none");
		$("#4").css("display", "none");
		$("#3").val("");
		$("#4").val("");
		if ($("input[name='type_jiedian']:checked").val() == "3") {
			$("#3").css("display", "");
			$("#4").css("display", "");
		} else {
			$("#" + $("input[name='type_jiedian']:checked").val()).css(
					"display", "");
		}

	}
	function closeNewPiediv() {
		$("#NewPiediv").popover('toggle');
	}

	function goA() {
		
		var type = $("input[name='type_jiedian']:checked").val();
		$("#NewPiediv").popover('toggle');
		$("#searchType").val(type);
		getPieGetData();
	}
</script>
</head>
<body>
	<%@ include file="/WEB-INF/view/common/topbar.jsp"%>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<%@ include file="/WEB-INF/view/common/sidebar.jsp"%>
			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a>
						</li>
						<li><a href="#">综合统计</a>
						</li>
						<li class="active">管理节点交换统计</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header header-color-white">
									<div class="widget-toolbar no-border">
										<a class="btn btn-primary btn-xs"
											href="${ctx}/stat/exch_total_static.do">
											切换到本节点交换统计&nbsp;&nbsp; </a>
									</div>
								</div>


								<div class="row">
									<div class="col-xs-12">
										<div class="col-sm-12">
											<div class="col-xs-6" style="margin-top: 10px;">
												<h4 class="header blue lighter smaller">
													<i class="icon-chevron-down"></i>
													交换频次最高的10个节点
												</h4>
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-6">
															<div class="input-group ">
																<span class="input-group-addon">统计时间 <input
																	type="radio" name="time_type1234" class="ace"
																	onchange="changeTime(this);" value="year"> <span
																	class="lbl">年</span> <input type="radio"
																	name="time_type1234" class="ace"
																	onchange="changeTime(this);" value="month" checked>
																	<span class="lbl">月</span> </span> <span
																	class="input-icon input-icon-right width-100"> <input
																	name="type1234" type="text" class="form-control year"
																	style="display: none;"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y'})" />
																	<input name="type1234" type="text"
																	class="form-control month"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M'})"
																	  /> <i class="icon-calendar blue"
																	id="time_icon"></i> </span>

															</div>
														</div>
														<div class="col-xs-4">
															<span
																class="btn btn-primary btn-sm btn-lg dropdown-toggle"
																data-rel="popover" data-placement="bottom"
																title=' &nbsp;&nbsp;
												<input  type="radio"   name="atype1234" id="atype_node" value="1" checked="checked"  />
												<span class="lbl" style="font-size: 11px;"> 节点</span>&nbsp;&nbsp; 
												<input  type="radio"   name="atype1234"  id="atype_sys" value="3"  />
												<span class="lbl" style="font-size: 11px;"> 适配器</span>
												&nbsp;&nbsp;
											'
																data-content=' 
												<div class="space-4"></div>
												<button class="btn btn-danger btn-minier" onclick="closediv();">
													<i class="icon-remove bigger-120"></i> 
												</button>
												<button type="button" class="btn btn-primary btn-minier "  style="margin-left: 97px;" id="submit" onclick="goC()">
													<i class="icon-ok bigger-110"></i>
												</button> '
																id="searchNewdiv">统计级别选择<span
																class="icon-caret-down icon-on-right"></span> </span>

														</div>
														<div class="col-xs-2">
															<div class="input-group ">
																<span class="input-group-btn">
																	<button type="button" class="btn btn-purple btn-sm"
																		onclick="getManageNodeNum()">
																		<i class="icon-bar-chart icon-on-right bigger-110"></i>统计
																	</button> </span>
																	<input type="hidden" id="asearchType" name="asearchType" value="${asearchType }">
															</div>
														</div>
													</div>
												</div>
												<div id="line1234" align="center" class="tab-content">
												</div>
											</div>
											<div class="col-xs-6" style="margin-top: 10px;">
												<h4 class="header blue lighter smaller">
													<i class="icon-chevron-down"></i>
													交换频率最高的业务数据
												</h4>
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-6">
															<div class="input-group ">
																<span class="input-group-addon">统计时间 <input
																	type="radio" name="time_type2345" class="ace"
																	onchange="changeTime(this);" value="year"> <span
																	class="lbl">年</span> <input type="radio"
																	name="time_type2345" class="ace"
																	onchange="changeTime(this);" value="month" checked>
																	<span class="lbl">月</span> </span> <span
																	class="input-icon input-icon-right width-100"> <input
																	name="type2345" type="text" class="form-control year"
																	style="display: none;"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y'})" />
																	<input name="type2345" type="text"
																	class="form-control month"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M'})"
																	  /> <i class="icon-calendar blue"
																	id="time_icon"></i> </span>

															</div>
														</div>
														<div class="col-xs-4">
															<span
																class="btn btn-primary btn-sm btn-lg dropdown-toggle"
																data-rel="popover" data-placement="bottom"
																title='  
												<input  type="radio"   name="type_jiedian" id="type_in" value="1" checked="checked" onclick="change();" />
												<span class="lbl" style="font-size: 11px;"> 内外网</span>
												<input  type="radio"   name="type_jiedian"  id="type_mang" value="2" onclick="change();" />
												<span class="lbl" style="font-size: 11px;"> 管理范围</span>
												<br>
												<input  type="radio"   name="type_jiedian" id="type_nodebet"  value="3" onclick="change();" />
												<span class="lbl" style="font-size: 11px;"> 节点间</span>'
																data-content='
											 
												<select class="input-medium" id="3" name="sys" onchange="beginId();"  style="display: none;width: 165px;font-size:small;">
													<option value="">-请选择开始节点-</option>
													<c:forEach var="node" items="${nodeList}">
														<option value="${node.id }" >${node.node_name}</option>
													</c:forEach>
												</select>
												<select class="input-medium" id="4" name="sys" onchange="endId();"  style="display: none;width: 165px;font-size:small;">
													<option value="">-请选择结束节点-</option>
													<c:forEach var="node" items="${nodeList}">
														<option value="${node.id }" >${node.node_name}</option>
													</c:forEach>
												</select>
												<div class="space-4"></div>
												<button class="btn btn-danger btn-minier" onclick="closeNewPiediv();">
													<i class="icon-remove bigger-120"></i> 
												</button>
												<button type="button" class="btn btn-primary btn-minier "  style="margin-left: 97px;" id="submit" onclick="goA()">
													<i class="icon-ok bigger-110"></i>
												</button> '
																id="NewPiediv">统计级别选择<span
																class="icon-caret-down icon-on-right"></span> </span>
																<input type="hidden" id="beginId" name="beginId" value="${beginId}">
																<input type="hidden" id="endId" name="endId" value="${endId}">
																<input type="hidden" id="searchType" name="searchType" value="${searchType }">

														</div>
														<div class="col-xs-2">
															<div class="input-group ">
																<span class="input-group-btn">
																	<button type="button" class="btn btn-purple btn-sm"
																		onclick="getPieGetData()">
																		<i class="icon-bar-chart icon-on-right bigger-110"></i>统计
																	</button> </span>
															</div>
														</div>
													</div>
												</div>
												<div id="chartPieOne" align="center" class="tab-content">
												</div>
											</div>
										</div>


										<div class="col-sm-12">
											<div class="col-xs-6" style="margin-top: 10px;">
												<h4 class="header blue lighter smaller">
													<i class="icon-chevron-down"></i>
													交换频次最高的10个内外网节点
												</h4>
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-6">
															<div class="input-group ">
																<span class="input-group-addon">统计时间 <input
																	type="radio" name="time_type456" class="ace"
																	onchange="changeTime(this);" value="year"> <span
																	class="lbl">年</span> <input type="radio"
																	name="time_type456" class="ace"
																	onchange="changeTime(this);" value="month" checked>
																	<span class="lbl">月</span> </span> <span
																	class="input-icon input-icon-right width-100"> <input
																	name="type456" type="text" class="form-control year"
																	style="display: none;"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y'})" />
																	<input name="type456" type="text"
																	class="form-control month"
																	onfocus="WdatePicker({onpicked:function(){},dateFmt:'yyyy-MM',maxDate:'%y-%M'})"
																	 /> <i class="icon-calendar blue"
																	id="time_icon"></i> </span>

															</div>
														</div>
														<div class="col-xs-4">
															<span
																class="btn btn-primary btn-sm btn-lg dropdown-toggle"
																data-rel="popover" data-placement="bottom"
																title=' &nbsp;&nbsp;
												<input  type="radio"   name="atype456" id="btype_node" value="1" checked="checked"/>
												<span class="lbl" style="font-size: 11px;"> 节点</span>&nbsp;&nbsp; 
												<input  type="radio"   name="atype456" id="btype_sys" value="3"  />
												<span class="lbl" style="font-size: 11px;">适配器</span>
												&nbsp;&nbsp;
											'
																data-content=' 
												<div class="space-4"></div>
												<button class="btn btn-danger btn-minier" onclick="closeSearchdiv();">
													<i class="icon-remove bigger-120"></i> 
												</button>
												<button type="button" class="btn btn-primary btn-minier "  style="margin-left: 97px;" id="submit" onclick="goB()">
													<i class="icon-ok bigger-110"></i>
												</button> '
																id="searchdiv">统计级别选择<span
																class="icon-caret-down icon-on-right"></span> </span>
														</div>
														<div class="col-xs-2">
															<div class="input-group ">
																<span class="input-group-btn">
																	<button type="button" class="btn btn-purple btn-sm"
																		onclick="getManageNetTop()">
																		<i class="icon-bar-chart icon-on-right bigger-110"></i>统计
																	</button> </span>
																	<input type="hidden" id="bsearchType" name="bsearchType" value="${bsearchType }">
															</div>
														</div>
													</div>
												</div>
												<div id="line456" align="center" class="tab-content">
												</div>
											</div>

											<div class="col-xs-6" style="margin-top: 10px;">
												<h4 class="header blue lighter smaller">
													<i class="icon-chevron-down"></i>
													节点/适配器注册频次
												</h4>
												<div class="widget-main">
													<div class="row">
														<div class="col-xs-6">
															<div class="input-group clearfix">
																<span class="input-group-addon ">&nbsp;统计时间&nbsp;&nbsp;&nbsp;&nbsp;
																	<input type="radio" name="time_type567" class="ace"
																	onchange="changeTime(this);" value="year" checked>
																	<span class="lbl">&nbsp;年</span> </span> <span
																	class="input-icon input-icon-right width-100"> <input
																	name="type567" id="type567" type="text" class="form-control year"
																	onfocus="WdatePicker ({onpicked:function(){},dateFmt:'yyyy',maxDate:'%y'})"
																	 /> <i class="icon-calendar blue"
																	id="time_icon"></i> </span>
															</div>
														</div>
														<div class="col-xs-2">
															<div class="input-group ">
																<span class="input-group-btn">
																	<button type="button" class="btn btn-purple btn-sm"
																		onclick="send11()">
																		<i class="icon-bar-chart icon-on-right bigger-110"></i>统计
																	</button> </span>
															</div>
														</div>
													</div>
												</div>
												<div id="line14" align="center" class="tab-content">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
